import React, { Component } from "react";
import "./index.css";

export default class States extends Component {
  constructor(props) {
    super(props);

    this.state = {
      msg: "react真麻烦",
      list: [{ name: "小明" }, { name: "小熊" }, { name: "小玉玉" }],
      index: -1,
    };
  }

  change = (val) => {
    console.log(this);
    this.setState({
      msg: val,
    });
  };

  show = (index) => {
    this.setState({
      index,
    });
  };
  //   点击变色效果

  render() {
    return (
      <div>
        {/* <button onClick={this.change}>change</button>
        <button
          onClick={() => {
            this.change("想念vue");
          }}
        >
          如果要传参 需要套一层箭头函数
          change
        </button>
        <h3>{this.state.msg}</h3> */}

        {this.state.list.map((item, index) => {
          return (
            <li
              key={index}
              onClick={() => {
                this.show(index);
              }}
              className={this.state.index == index ? "active" : ""}
            >
              {item.name}
            </li>
          );
        })}
      </div>
    );
  }
}

//绑定事件 驼峰值的写法 事件直接定义在类里面，注意因为有this的问题所以 事件定义为一个箭头函数
// 要修改state this.setState({
//     msg:""
// })

// 定义的事件要传参 要在外面包一层箭头函数
